<template>
  <section class="xm-content">
    <div class="overviews">
      <div class="top_wrap">
        <div class="title">
          <span>全球概览</span>
        </div>
        <div class="item_wrap">
          <div class="item_box" v-for="(item,index) in whatResultsGlobalList" :key="index">
            <span>{{item.name}}</span>
            <span>
              <el-tooltip effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit setting" @click="add_edit(1,item)"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="复制" placement="top">
                <i class="el-icon-document-copy setting" @click="handleCopy(1,item)"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除" placement="top">
                <i class="el-icon-delete" @click="handleDel(1,item)"></i>
              </el-tooltip>
            </span>
          </div>
        </div>
        <div class="add_Wrap" @click="add_edit(1,{})">
          <i class="el-icon-plus"></i>
        </div>
        <div class="title">
          <span>用户概述</span>
        </div>
        <div class="item_wrap">
          <div class="item_box" v-for="(item,index) in whatResultsUserList" :key="index">
            <span>{{item.name}}</span>
            <span>
              <el-tooltip effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit setting" @click="add_edit(2,item)"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="复制" placement="top">
                <i class="el-icon-document-copy setting" @click="handleCopy(2,item)"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除" placement="top">
                <i class="el-icon-delete" @click="handleDel(2,item)"></i>
              </el-tooltip>
            </span>

          </div>
        </div>
        <div class="add_Wrap" @click="add_edit(2,{})">
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div>
    <div class="xm-footer">
      <el-button type="info" size="mini" @click="close">关 闭</el-button>
    </div>
  </section>
</template>

<script>
import {whatResultsGlobal, whatResultsUser,delWhatResults,copyWhatResult} from "@/api/monitor";
import AddEdit from "./AddEdit";

export default {
  props: {
    layerid: {
      default: 0
    },
    row: {
      default: {}
    }
  },
  data() {
    return {
      box_loading: false,
      btn_loading: false,
      whatResultsGlobalList:[],
      whatResultsUserList:[],
    }
  },
  mounted() {
     if (this.row.id) this.form = JSON.parse(JSON.stringify(this.row));
     this.whatResultsGlobal();
     this.whatResultsUser();
  },
  methods: {
    async whatResultsGlobal() {
      const res = await whatResultsGlobal({});
      if(res.status == 200){
        this.whatResultsGlobalList = res.data;
      }
    },
    async whatResultsUser() {
      const res = await whatResultsUser({});
      if(res.status == 200){
        this.whatResultsUserList = res.data;
      }
    },
    changeColor(e){
      this.form.color = e;
    },
    /* 删除 */
    handleDel(globalType,row) {
      this.$confirm('确认删除此信息?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delWhatResults(row.id)
        if (res.status == 200) {
          this.$message({ message: '删除成功', type: 'success' })
          if(globalType ==1){
            this.whatResultsGlobal();
          }else{
            this.whatResultsUser();
          }
          this.$parent.getWhatResultsList()
        }
      }).catch(() => {
      })
    },
    handleCopy(globalType,row){
      this.copyWhatResult(globalType,row.id)
    },
    //复制监控指标对象根据id
    async copyWhatResult(globalType,id){
      const res = await copyWhatResult(id);
      if(res.status == 200) {
        if(globalType ==1){
          this.whatResultsGlobal();
        }else{
          this.whatResultsUser();
        }
        this.$parent.getWhatResultsList()
      }
    },
    add_edit(globalType,row){
      var title = ''
      if(globalType==1 && row.id){
        title = '编辑全球概览'
      }
      if(globalType==1 && !row.id){
        title = '新增全球概览'
      }
      if(globalType==2 && row.id){
        title = '编辑用户概述'
      }
      if(globalType==2 && !row.id){
        title = '新增用户概述'
      }
      this.$layer.iframe({
        shadeClose:false,
        content: {
          content: AddEdit,
          parent: this,
          data: {
            row:row,
            globalType:globalType
          }
        },
        maxmin: true,
        area: ['1200px', '650px'],
        title: title
      })

    },
    close() {
      this.$layer.close(this.layerid)
    }
  }
}
</script>
<style scoped lang="scss">
.overviews{
  .title{
    font-size: 18px;
    margin-top: 30px;
  }
  .item_wrap{
    display: flex;
    flex-wrap: wrap;
    min-height: 100px;
    .item_box{
      cursor: pointer;
      width: 30%;
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      padding:0 20px;
      margin-right: 15px;
      background-color: #787878;
      font-size: 20px;
      margin-top: 20px;
      transition: background-color .2s ease-out;
      color: #fff;
      .setting{
        margin-right:10px;
      }
    }
  }
  .add_Wrap{
    margin-top:20px;
    cursor: pointer;
    width:180px;
    height: 46px;
    background-color: rgba(54, 148, 255, 100);
    color: #fff;
    font-family: Roboto;
    text-align: center;
    i{
      font-weight: bolder;
      font-size: 22px;
      line-height: 46px;
    }
  }
}


</style>
